<template>
  <div
    class="eureka-side w-[228px] h-full py-4 px-0 flex-shrink-0 transition-all duration-[400ms] ease-in-out"
    :class="{ 'is-collapse': isCollapse }"
  >
    <div class="px-4 h-10 mb-[30px] flex items-center relative platform-info">
      <HomeFilled class="h-7 w-7 mr-[10px] ml-[6px] logo-small" />

      <div
        v-if="!isCollapse"
        class="absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 rounded-[6px] items-center justify-center cursor-pointer hidden collapse-btn"
        @click="toCollapse"
      >
        <Fold class="w-4 h-4" />
      </div>
      <div
        v-if="isCollapse"
        class="absolute w-10 h-10 rounded-[10px] items-center justify-center cursor-pointer hidden open-btn"
        @click="toOpen"
      >
        <Expand class="w-4 h-4" />
      </div>
    </div>
    <el-menu
      default-active="2"
      class="w-full border-r-0 px-4 bg-transparent h-[calc(100%-140px)]"
      :collapse="isCollapse"
    >
      <el-menu-item
        v-for="item in menuList"
        :key="item.code"
        :index="item.code"
        :class="{ 'is-menu-active': isActiveMenu(item) }"
        class="mb-4 h-10 px-4 text-[#6e6d9c] rounded-[10px]"
        @click="toSetMenu(item)"
      >
        <div v-show="!isActiveMenu(item)" class="w-[18px] h-[18px] bg-purple-500"></div>
        <div v-show="isActiveMenu(item)" class="w-[18px] h-[18px] bg-yellow-500"></div>
        <template #title>
          <span class="ml-3">{{ item.name }}</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// Mock 数据
const mockUserInfo = {
  realName: '张三',
  userName: 'zhangsan',
}

const mockMenuList = [
  { code: 'LifeCircle', name: '生命周期' },
  { code: 'EventLoop', name: '事件循环' },
  { code: 'ParameterPass', name: '参数传递' },
  // { code: 'UseHook', name: 'Hook 使用' },
  { code: 'Css', name: 'CSS相关' },
]

// Mock store
const mockStore = {
  userAvatar: null,
  userInfo: mockUserInfo,
}

const isCollapse = defineModel()
const toCollapse = () => {
  isCollapse.value = true
}
const toOpen = () => {
  isCollapse.value = false
}
const router = useRouter()
const toSetMenu = (item) => {
  console.log('切换菜单:', item)
  // 简化的路由跳转，去掉store依赖
  router.push({ name: item.code })
}

const routeInfo = useRoute()
const isActiveMenu = computed(() => {
  return (item) => {
    return routeInfo.name === item.code || routeInfo.meta.relatedMenu === item.code
  }
})

const menuList = ref(mockMenuList)
const userInfo = computed(() => {
  return mockStore.userInfo
})
</script>

<style lang="scss" scoped>
// 保留需要通过 :class 实现的动态样式和复杂伪类选择器
.eureka-side {
  &:hover {
    .platform-info {
      .collapse-btn,
      .open-btn {
        @apply flex;
      }
    }
  }

  &.is-collapse {
    @apply w-[72px];

    &:hover {
      .logo-small {
        @apply hidden;
      }
    }

    .el-menu {
      .el-menu-item {
        @apply p-[10px];
      }
    }
  }
}

.collapse-btn {
  &:hover {
    background: rgba(20, 17, 51, 0.04);
  }
}

.open-btn {
  background: rgba(20, 17, 51, 0.04);
}

.el-menu {
  .el-menu-item {
    font-family: OPPOSansM;
    transition: none;

    &:hover {
      background: rgba(20, 17, 51, 0.04);
    }

    &.is-menu-active {
      @apply text-[#665ced] border border-solid border-[#e9e9f1] bg-white/80;
      box-shadow:
        0px 2px 4px -2px rgba(16, 24, 40, 0.02),
        0px 4px 8px -2px rgba(16, 24, 40, 0.02);
    }

    :deep(.el-menu-tooltip__trigger) {
      @apply flex items-center justify-center p-0;
    }
  }
}

.user-info-box {
  &:hover {
    background: rgba(20, 17, 51, 0.04);
  }
}

.operate-list-item {
  &.is-exit {
    &:hover {
      @apply text-[#d92d20] bg-[#fef3f2];
    }
  }
}

.permission-tip {
  .eureka-active-icon {
    &:hover {
      @apply text-[#665ced];
    }
  }
}
</style>

<style lang="scss">
.ding-qrcode-popover.eureka-popover-class.el-popover.el-popper {
  @apply px-[27px] py-6;
  background: radial-gradient(323.12% 134.24% at 50% 134.24%, #e1e3fa 0%, #fff 67.42%), #fff;
  transform: translateX(-16px);
}
</style>
